<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script charset="utf-8" type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/com.wxd.js"></script>
    <script charset="utf-8" type="text/javascript" src="/js/pageview.js"></script>
    <title>b</title>
    <link rel="stylesheet" type="text/css" href="/style/com.wxd.css"/>
    <link rel="stylesheet" type="text/css" href="/style/table.css"/>
    <style>
        .box {display: flex;flex-direction: column;}

        .root_box_top {height: 200px;}

        .root_box_center {flex: 1;}

        .root_box_bottom {height: 38px;}

        .root_box_bottom label {padding-left: 5px;padding-right: 5px;}

    </style>
    <script>

        let pageView = null;

        function search() {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("minTime", $("#minTime").val());
            urlQuery.put("maxTime", $("#maxTime").val());
            urlQuery.put("where", $("#labWhere").text());
            urlQuery.put("order", $("#labOrderBy").text());
            pageView.remoteGetData(urlQuery);
        }

        function excel() {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            urlQuery.put("minTime", $("#minTime").val());
            urlQuery.put("maxTime", $("#maxTime").val());
            urlQuery.put("where", $("#labWhere").text());
            urlQuery.put("order", $("#labOrderBy").text());
            urlQuery.put("pageIndex", pageView.pageIndex());
            urlQuery.put("pageSize", pageView.pageSize());

            new wxd.netty.PostRequest("/admin/log/excel", urlQuery.toString(), (response) => {
                console.log(response)
                if (response.code === 1) {
                    wxd.netty.download(response.data);
                    wxd.loading_close();
                } else {
                    wxd.loading_close();
                }
            }).send();
        }

        // 用于显示的格式化版本
        function formatForDisplay(str) {
            if (typeof str === "string") {
                return str;
            }
            return JSON.stringify(str, null, 2); // 会保留换行和缩进
        }

        function formatJsonWithNewlines(obj) {
            if (typeof obj === 'string') {
                try {
                    obj = JSON.parse(obj);
                } catch (e) {
                    // 如果解析失败，直接格式化字符串
                    return obj;
                }
            }
            // 使用2个空格进行缩进，自动包含换行符
            return JSON.stringify(obj, null, 2);
        }

        function escapeJSString(str) {
            return formatForDisplay(str).replace(/\\/g, "\\\\")
                .replace(/'/g, "\\'")
                .replace(/"/g, "\\\"")
                .replace(/\n/g, "\\n")
                .replace(/\r/g, "\\r")
                .replace(/\t/g, "\\t");
        }

        function createRow(number, row, index) {
            let tr = `<tr ondblclick="alertShow2(${index})">`;
            for (const key in pageView.columns) {
                let column = pageView.columns[key];
                let columnName = column.name;
                let columnComment = column.comment;
                let columnStyle = column.style;
                let columntitle = column.title;
                let rowValue = row[columnName];
                if (rowValue === null || rowValue === undefined) {
                    rowValue = "";
                }
                tr += `<td style="${columnStyle}" title="${columntitle}">${rowValue}</td>`;
            }
            tr += `</tr>`;
            return tr;
        }

        function alertShow2(index) {
            let content = pageView.items[index];
            content = formatJsonWithNewlines(content);
            console.log(typeof content, content);
            new wxd.message.Alert(`<pre>${content}</pre>`, "详情").show();
        }

        $(() => {
            wxd.loading();
            let urlQuery = new wxd.Map().loadSearch();
            pageView = new PageView("/admin/log/page", search, createRow);
            pageView.gameId = urlQuery.get("gameId");


            let url = "/admin/log/title";
            let map = new wxd.Map();
            map.loadSearch();
            new wxd.netty.PostRequest(url, map.toString(), (response) => {
                if (response.code === 1) {
                    document.title = response.comment;
                    $(".tableDom").attr("style", $(".tableDom").attr("style") + "" + response.style);
                    let data = response.data;
                    for (let i = 0; i < data.length; i++) {
                        let item = data[i];
                        pageView.columns[item.name] = item;
                        $("#where").append(`<option value="${item.name}">${item.comment}</option>`);
                        $("#orderField").append(`<option value="${item.name}">${item.comment}</option>`);
                        let l = `<th class="${item.name}" style="${item.style}" title="${item.title}">${item.comment}</th>`;
                        $(".table_head").append(l);
                    }
                    search();
                }
            }).send();

        });

        let whereJsonArray = [];

        function addWhere() {
            let whereJson = {};
            whereJson["where"] = $("#where").val();
            whereJson["and"] = $("#and").val();
            whereJson["whereValue"] = $("#whereValue").val();
            whereJsonArray[whereJsonArray.length] = whereJson;
            $("#labWhere").text(JSON.stringify(whereJsonArray));
            $("#whereValue").val("")
            $("#and").val("=");
        }

        function clearWhere() {
            whereJsonArray = [];
            $("#labWhere").text("");
        }

        let orderByJsonArray = [];

        function addOrder() {
            let orderJson = {};
            orderJson["orderField"] = $("#orderField").val();
            orderJson["orderOption"] = $("#orderOption").val();
            orderByJsonArray[orderByJsonArray.length] = orderJson;
            $("#labOrderBy").text(JSON.stringify(orderByJsonArray));
        }

        function clearOrder() {
            orderByJsonArray = [];
            $("#labOrderBy").text("");
        }

    </script>
</head>
<body>
<div class="root box">
    <div class="root_box_top btn_box" style="padding-left: 20px; padding-top: 8px; text-align: left;vertical-align: center;">
        <label for="minTime">开始日期: </label><input id="minTime" type="date"/>
        <label for="maxTime">结束日期: </label><input id="maxTime" type="date"/>
        <br>
        <label for="where">查询条件:</label>

        <select id="where">

        </select>

        <select id="and" style="width: 60px;">
            <option value="=">=</option>
            <option value="<="><=</option>
            <option value="<"><</option>
            <option value=">=">>=</option>
            <option value=">">></option>
            <option value="ilike">包含</option>
            <option value="notilike">不包含</option>
        </select>

        <input id="whereValue" type="text"/>
        <input type="button" onclick="addWhere();" value="添加"/>
        <input type="button" onclick="clearWhere();" value="清理"/>
        <br>
        <label for="labWhere">查询条件:</label><label id="labWhere"></label>
        <br>
        <label for="orderField">排序条件:</label>

        <select id="orderField">

        </select>

        <select id="orderOption" style="width: 60px;">
            <option value="DESC">降序</option>
            <option value="ASC">升序</option>
        </select>

        <input type="button" onclick="addOrder();" value="添加"/>
        <input type="button" onclick="clearOrder();" value="清理"/>
        <br>
        <label for="labOrderBy">排序条件:</label><label id="labOrderBy"></label>
        <br>
        <br>
        <button onclick="search();">查询</button>
        <button onclick="excel();">Excel</button>
    </div>
    <div class="root_box_center tableDom" style="margin: 10px; padding-right: 10px;border-radius: 0; overflow-x: auto;">
        <table style="min-width: 1400px;">
            <thead>
            <tr class="table_head">
            </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <div class="root_box_bottom">

    </div>
</div>
</body>
</html>